<template>
  <div class="dashboard-header">
    <h1>工作台</h1>
    <div class="user-info">
      <span class="welcome-text">欢迎回来，{{ userInfo.name }}</span>
      <span class="position-info">{{ userInfo.position_name }} - {{ userInfo.dept_name }}</span>
      <el-button type="text" @click="refreshData" class="refresh-btn">
        <el-icon><Refresh /></el-icon>
        刷新数据
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Refresh } from '@element-plus/icons-vue'

  interface UserInfo {
    name: string
    position_name: string
    dept_name: string
  }

  interface Props {
    userInfo: UserInfo
    onRefresh: () => void
  }

  const props = defineProps<Props>()

  const refreshData = () => {
    props.onRefresh()
  }
</script>

<style scoped lang="scss">
  .dashboard-header {
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dashboard-header h1 {
    margin: 0;
    font-size: 24px;
    color: #303133;
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .welcome-text {
    font-size: 16px;
    color: #606266;
  }

  .position-info {
    font-size: 14px;
    color: #909399;
  }

  .refresh-btn {
    color: #409eff;
  }
</style>
